<template>
  <view class="ding">
    <view></view>
    <view>相册</view>
    <view style="color: blue;" @click="icon">取消</view>
  </view>
  <view class="xianglist" @click="xiang">
    <view class="list" v-for="(item,index) in list" :key="index">
      <view>
        <img :src="item.img" alt="" style="width: 60px;height: 60px; margin-left: 20px;">

      </view>

      <view style="margin-left: 10px;">
        <p style="margin-top: 10px; width: 100px;">{{item.name}}</p>
        <p>100</p>
      </view>

      <view style="margin-left: 150px; margin-top: 15px; color: #666; font-size: 20px;"> &gt; </view>
    </view>
  </view>
    
</template>
  
<script  setup lang="ts">

import { ref } from "vue";

const list=ref([
  {id:0,name:'相册名称',img:"/static/img/tupian.png",},
  {id:1,name:'相册名称',img:"/static/img/tupian.png",},
  {id:2,name:'相册名称',img:"/static/img/tupian.png",},
  {id:3,name:'相册名称',img:"/static/img/tupian.png",},
  {id:4,name:'相册名称',img:"/static/img/tupian.png",},
  {id:5,name:'相册名称',img:"/static/img/tupian.png",},
  {id:6,name:'相册名称',img:"/static/img/tupian.png",},
  {id:7,name:'相册名称',img:"/static/img/tupian.png",},
  {id:8,name:'相册名称',img:"/static/img/tupian.png",},
  {id:9,name:'相册名称',img:"/static/img/tupian.png",},
])

const icon = () => {
  //返回上一页
  uni.navigateBack({
    delta: 1
  })
}

const xiang= () => {
  uni.navigateTo({
    url: '/pages/qiao-crm/qiao-sousuo/qiaoxiangce'
  })
}
</script>
<style lang="scss">
.list {
  display: flex;
  border: 1px solid #ccc;
  
}

.xianglist {
  width: 360px;
  margin-top: 10px;
  margin-left: 8px;

}

.ding {
  margin-top: 40px;
  justify-content: space-between;
  padding: 10px 10px;
  display: flex;
  border-bottom: 1px solid #ccc;
}
</style>